<template>
    <div class="btn btn__primary" >
      <p>{{props.content}}</p>
    </div>
</template>

<script lang="ts" setup>
import { ref,watch } from 'vue'


const emit =  defineEmits(['update:modelValue'])
const props = withDefaults(
  defineProps<{
    disabled?: boolean
    type?:string
    size?: string
    content?: string
  }>(),{
    type:'danger',
    size: '',
    content: 'Button'
  }
)
const buttonStyle = {
background: '',
background_light: '',
background_dark:'',
withSize: props.size === 'mini'? '50px' : '80px',
heightSize: props.size === 'mini'? '30px' : '40px',
fontSize: props.size === 'mini'? '12px' :'20px',
fontWith: props.size === 'mini' ? '600' : '650',
}

switch(props.type) {
  case 'info':
    buttonStyle.background = 'rgb(67, 83, 126)'
    buttonStyle.background_light='#6d8fbb',
    buttonStyle.background_dark = '#2d597e'
    break;
  case 'success':
    buttonStyle.background = 'rgb(22, 165, 53)'
    buttonStyle.background_light='#86dd8d',
    buttonStyle.background_dark = '#1c9918'
    break;
  case 'warn':
    buttonStyle.background = 'rgb(240, 151, 35)'
    buttonStyle.background_light='#ffcc8a',
    buttonStyle.background_dark = '#eba50e'
    break;
  case 'danger':
    buttonStyle.background = 'rgb(209, 45, 39)'
    buttonStyle.background_light='#f36785',
    buttonStyle.background_dark = '#b32c2c'
    break;
}

const { background:bg, background_light:bl,
background_dark:bd ,withSize:ws,
heightSize:hs, fontSize:fs,
fontWith:fw
} = buttonStyle
</script>
<style lang="less" scoped>
/*  BUTTONS  */
// @success:rgb(240, 151, 35);
// @success-light: #ffcc8a;
// @success-dark: #eba50e;

// @success:rgb(209, 45, 39);
// @success-light: #f36785;
// @success-dark: #b32c2c;

// @success:rgb(22, 165, 53);
// @success-light: #86dd8d;
// @success-dark: #1c9918;

// @success:rgb(67, 83, 126);
// @success-light: #6d8fbb;
// @success-dark: #2d597e;
.btn {
  user-select: none;
  margin-left: 800px;
  width: v-bind(ws);
  height: v-bind(hs);
  border-radius: 12px;
  box-shadow: 0.3rem 0.3rem 0.6rem @greyLight-2, -0.2rem -0.2rem 0.5rem @white;
  justify-self: center;
  margin-top: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: 0.3s ease;

}
.btn__primary {
  grid-column: 1/2;
  grid-row: 4/5;
  background: @primary;
  background: v-bind(bg);
  // box-shadow: inset 0.2rem 0.2rem 1rem @primary-light,
  // box-shadow: inset 0.2rem 0.2rem 1rem @success-light,
  //   inset -0.2rem -0.2rem 1rem @success-dark, 0.3rem 0.3rem 0.6rem greyLight-2,
  //   -0.2rem -0.2rem 0.5rem @white;
  color: @greyLight-1;
}
.btn__primary:hover {
  color: @white;
}
.btn__primary:active {
  box-shadow: inset 0.2rem 0.2rem 1rem v-bind(bd),
    inset -0.2rem -0.2rem 1rem v-bind(bl);
}
.btn__secondary {
  grid-column: 1/2;
  grid-row: 5/6;
  color: @greyDark;
}
.btn__secondary:hover {
  color: @primary;
}
.btn__secondary:active {
  box-shadow: inset 0.2rem 0.2rem 0.5rem @greyLight-2,
    inset -0.2rem -0.2rem 0.5rem @white;
}
.btn p {
  font-size: v-bind(fs);
  margin-top:25%;
  font-weight: v-bind(fw);
}
</style>
